<!--
 * @Descripttion: 
 * @version: 
 * @Author: mmzhang
 * @Date: 2021-07-20 15:23:43
 * @LastEditTime: 2022-07-29 14:18:45
-->
<template>
  <div class="operate-msg">
    <div class="operate-content">
      <div class="item-content" v-for="(item,key,index) in lineData" :key="index">
        <p class="line flex"><span class="node-time">{{key}}</span></p>
        <Timeline>
          <TimelineItem v-for="(itemTime,indexTime) in item" :key="indexTime">
            <div class="flex">
              <p class="time">{{itemTime.time}}</p>
              <p class="name">{{itemTime.operatorName}}</p>
            </div>
            <!--图文-->
            <div v-if="itemTime.attachAddress">
              <p class="desc-text">{{itemTime.content}}</p>
              <enclosure-img :images="JSON.parse(itemTime.attachAddress)" :showDownLoad="false"
                :showDelete="false"> </enclosure-img>
            </div>
            <!--引用驳回 破底价内容-->
            <div v-else-if="itemTime.approvePropose">
              <div class="flex">
                <p class="desc-text">{{itemTime.content}}</p>
                <p class="desc-text" @click="linkOrder(itemTime)"
                  v-if="itemTime.operateType =='REJECT_CONTRACT_ADJUST'||itemTime.operateType =='REJECT_SUBSCRIPTION_ADJUST'">
                  ，{{orderStatusCN[itemTime.code.slice(0,2)]}}单编号:<span
                    class=" link hand">{{itemTime.code}}</span></p>
              </div>
              <div class="desc-detail">
                <div class="flex">
                  <Icon type="md-warning" :size="20" color="#13227a"
                    style="line-height:26px;margin-right:10px;" />
                  <p class="desc-title">
                    {{(itemTime.operateType=='ORDER_AGREE' || itemTime.operateType=='CONTRACT_AGREE')?'破底价说明':(itemTime.operateType=='SUB_BREAK_LOW_PRICE_PASS'||itemTime.operateType=='SUB_BREAK_LOW_PRICE_OBJECT'||itemTime.operateType=='CONTRACT_BREAK_LOW_PRICE_PASS'||itemTime.operateType=='CONTRACT_BREAK_LOW_PRICE_OBJECT')?'审批内容':'驳回原因'}}
                  </p>
                </div>
                <p class="desc-reason">
                  {{itemTime.approvePropose}}</p>
              </div>
            </div>
            <!--文字 + 链接-->
            <div v-else-if="itemTime.orderId">
              <p class="desc-text">{{itemTime.content}}
                <span v-if="showOrder ||['TR', 'TQ'].indexOf(itemTime.code.slice(0, 2)) > -1 ? true :
        false">，{{orderStatusCN[itemTime.code.slice(0,2)]}}单编号:<span class="link hand"
                    @click="linkOrder(itemTime)"
                    v-if="itemTime.orderId">{{itemTime.code}}</span></span>
              </p>
            </div>
            <!--纯文字-->
            <p v-else class="desc-text">{{itemTime.content}}</p>
          </TimelineItem>
        </Timeline>
      </div>
    </div>

    <!-- 分页 -->
    <dt-page v-model="pageOpt" @change="onPageChange" />
  </div>
</template>
<script>
  import enclosureImg from '@/components/enclosureImg.vue'
  import comMgr from '@/biz/sales/salesCommon'
  export default {
    components: { enclosureImg },
    props: {
      code: {
        type: String,
        default: '',
      },
      buildingId: {
        type: [Number, String],
        default: null,
      },
    },
    data() {
      return {
        isView: this.$route.meta.isbuild == 'nobuildpage' ? true : false, // 是否是汇总数据跳转
        showOrder: true,
        lineData: {},
        orderStatusCN: {
          RG: '认购',
          UR: '退购',
          QY: '签约',
          UQ: '退签',
          TR: '认购调整',
          TQ: '签约调整'
        },
        pageOpt: {
          total: 0
        },
      }
    },
    created() {
      this.showOrder = ['RG', 'QY'].indexOf(this.code.slice(0, 2)) > -1 ? true :
        false
    },
    mounted() {
      this.getOperateLog()
    },
    methods: {
      linkOrder(item) {
        // 认购: 'RG',
        // 退购: 'UR',
        // 签约: 'QY',
        // 退签: 'UQ',
        // 认购调整: 'TR',
        // 签约调整: 'TQ',
        let orderParams = {}
        let type = item.code.slice(0, 2)
        switch (type) {
          case 'RG':
            orderParams = {
              orderNum: item.code, // 单号
              businessId: item.orderId, // 业务id
              buildingId: this.buildingId,
              subscriptionId: ''
            }
            break
          case 'UR':
            orderParams = {
              orderNum: item.code, // 单号
              businessId: item.orderId, // 业务id
              buildingId: this.buildingId,
              subscriptionId: ''
            }
            break
          case 'QY':
            orderParams = {
              orderNum: item.code, // 单号
              businessId: item.orderId, // 业务id
              buildingId: this.buildingId,
              subscriptionId: this.subscriptionId,
            }
            break
          case 'UQ':
            orderParams = {
              orderNum: item.code, // 单号
              businessId: item.orderId, // 业务id
              buildingId: this.buildingId,
              subscriptionId: '',
            }
            break
          case 'TR':
            orderParams = {
              orderNum: item.code, // 单号
              businessId: item.orderId, // 业务id
              orderType: '认购'
            }
            break
          case 'TQ':
            orderParams = {
              orderNum: item.code, // 单号
              businessId: item.orderId, // 业务id
              orderType: '签约'
            }
            break
          default:
            break
        }
        this.linkOrderFun(orderParams)
      },
      onPageChange() {
        this.getOperateLog()
      },
      // 获取操作记录
      getOperateLog() {
        let params = {
          businessId: this.code,
          page: this.pageOpt.current,
          rows: this.pageOpt.rows,
        }
        comMgr
          .getOperateLog(params)
          .then((res) => {
            if (res) {
              this.lineData = { ...res.list }
              this.pageOpt.total = res.total
            } else {
              this.lineData = {}
              this.pageOpt.total = 0
            }
          })
          .catch((res) => {
            this.$Message.error(res)
            this.lineData = {}
            this.pageOpt.total = 0
          })
      }
    },
  }
</script>
<style lang="scss" scoped>
  .operate-msg {
    .operate-content {
      max-height: 550px;
      overflow-y: auto;
    }

    .line {
      margin-bottom: 20px;
    }

    .node-time {
      display: inline-block;
      padding: 0 10px;
      width: 150px;
      font-size: 20px;
    }

    .line:before {
      content: '';
      display: table-cell;
      position: relative;
      top: 50%;
      width: 100px;
      border-top: 1px solid #e8eaec;
      transform: translateY(50%);
    }

    .line:after {
      content: '';
      display: table-cell;
      position: relative;
      top: 50%;
      width: 100%;
      border-top: 1px solid #e8eaec;
      transform: translateY(50%);
    }

    .link,
    .time,
    .name {
      color: #0f42a7;
    }

    .name {
      margin-left: 20px;
    }

    .content {
      color: #7f7f7f;
    }

    .item-content {
      margin: 10px 20px;
    }

    .desc-text {
      color: #7f7f7f;
      font-size: 16px;
      line-height: 40px;
    }

    .desc-detail {
      width: 50%;
      padding: 20px;
      background-color: #fefcec;

      .desc-title {
        font-size: 18px;
      }

      .desc-reason {
        font-size: 14px;
      }
    }
  }
</style>